<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>营业管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./static/css/font.css">
    <link rel="stylesheet" href="./static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./static/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #chart-wrap{
            width:670px;
            height:240px;
            position:relative;
            top:20px;
            left:20px;
            margin-bottom: 20px;
        }
        #foodContent{
            padding-left: 20px;
            padding-top: 40px;
        }
        #foodContent2{
            padding-left: 20px;
            padding-top: 40px;
        }
        .foodContainer{
            border: 1px solid lightgray;
            text-align: center;
            background-color: white;
            width: 190px;
            height: 250px;
            margin-left: 30px;
            margin-bottom: 25px;
        }
        .foodContainer div{
            margin-top: 10px;

        }
        .foodContainer img{
            margin: 5px auto;
        }
        .foodPrice{
            color: rgb(240, 43, 43);
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">营业管理</a>
        <a>
          <cite>营业管理</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div>
    <fieldset class="layui-elem-field  site-demo-button" style="margin: 20px; height: 400px">
        <legend>一周内营业额柱状图</legend>
        <div id="chart-wrap">
            <fieldset class="layui-elem-field  site-demo-button" style="margin-left: 820px; width: 600px">
            <legend>今日最热产品</legend>
            <div class="layui-tab-content" id="foodContent2">
                <div class="layui-tab-item layui-show foodContent" id="foodContent0">

                </div>
            </div>
        </fieldset>
        </div>
        <div style="margin-left: 150px"><span>本周营业额合计：<span STYLE="color:red;" id="sumMoney"></span>元</span></div>

    </fieldset>

    <fieldset class="layui-elem-field" style="margin: 20px">
        <legend>数据统计</legend>
        <div class="layui-field-box">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-carousel x-admin-carousel x-admin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 90px;">
                            <div carousel-item="">
                                <ul class="layui-row layui-col-space10 layui-this">
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>今日订单</h3>
                                            <p>
                                                <cite id="todayOrder">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>会员数</h3>
                                            <p>
                                                <cite id="memberCount">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>今日营业额</h3>
                                            <p>
                                                <cite id="todayMoney">99</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>当前正在用餐桌数</h3>
                                            <p>
                                                <cite id="useTable">0</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>菜品数量</h3>
                                            <p>
                                                <cite id="foodCount">67</cite></p>
                                        </a>
                                    </li>
                                    <li class="layui-col-xs2">
                                        <a href="javascript:;" class="x-admin-backlog-body">
                                            <h3>员工数量</h3>
                                            <p>
                                                <cite id="workerNum">6766</cite></p>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field  site-demo-button" style="margin: 20px">
        <legend>历史销量排行</legend>
        <div class="layui-tab-content" id="foodContent">
            <div class="layui-tab-item layui-show foodContent" id="foodContent1">

            </div>
        </div>
    </fieldset>
</div>

<script>
    // 生成一周内的柱状图
    function renderChart(moneyData) {
        var cw = document.getElementById("chart-wrap");
        //cw.innerHTML = "";
        var max = 0;
        for (var index in moneyData) {
            if (moneyData[index] > max)
                max = moneyData[index];
        }
        var percent = 180 / max;
        var i = 0;
        for (var index in moneyData) {
            var bar = document.createElement("div");
            bar.id = index + "_" + moneyData[index];
            bar.style.height = Math.round(percent * moneyData[index]) + "px";
            bar.style.width = "40px";
            bar.style.left = (i * 40) + 165 + "px";
            bar.style.marginLeft = (i * 20 + 18) + "px";
            bar.style.position = "absolute";
            bar.style.background = "none repeat scroll 0 0 #66AEFF";
            bar.style.overflow = "hidden";
            bar.setAttribute("title", date[i] + "号：" + moneyData[index]+"元");
            bar.style.display = "block";
            bar.style.top = 200 - Math.round(percent * moneyData[index]) + "px";
            cw.appendChild(bar);
            var axis = document.createElement("div");
            axis.id = "axis_" + i;
            axis.style.width = "40px";
            axis.style.left = (i * 40) + 165 + "px";
            axis.style.marginLeft = (i * 20+10) + "px";
            axis.style.textAlign = "right";
            axis.style.position = "absolute";
            axis.style.top = "205px";
            axis.innerHTML = '<span style="font-size:12px; color:grey;"> ' + date[i] + '号</span>';
            cw.appendChild(axis);
            i++;
        }
        for (var i = 0; i <= 5; i++) {
            var ayis = document.createElement("div");
            ayis.style.width = "50px";
            ayis.style.position = "absolute";
            ayis.style.top = (36 * i) + (20 - 8) + "px";
            ayis.style.left = "115px";
            ayis.innerHTML = '<span style="font-size:12px; color:grey;text-align:right;"> ' + Math.round(max - (max / 5) * i) + '元</span>';
            cw.appendChild(ayis);
            var line = document.createElement("div");
            line.setAttribute("style", "width:480px; left:165px; border-top:1px dotted grey; height:1px; line-height:1px; display:block; overflow:hidden; position:absolute; ");
            line.style.top = (36 * i) + 20 + "px";
            cw.appendChild(line);
        }
    }
    var moneyData = [];
    var date = [];
    // 获取一周内营业额
    $.ajax({
        async:false,
        type: "post",
        url: "${pageContext.request.contextPath}/business?m=findOrderMoneyByDay",
        dataType: "json",
        success: function (data) {
            if (data.code === 200) {
                $('#todayMoney').text(parseFloat(data.data[7]));
                var sum= 0.00;
                for (var i = 0; i < 14; i++) {
                    if (i<7) {
                        date.push( Math.floor(parseInt(data.data[i]) * 100) / 100);
                    }else {
                        var  temp = parseFloat(((data.data[i]*100)/100).toFixed(2));
                        sum += temp;
                        sum=parseFloat(sum.toFixed(2));
                        moneyData.push(parseFloat(((data.data[i]*100)/100).toFixed(2)));
                    }
                }
                sum=parseFloat(sum.toFixed(2));
                $("#sumMoney").text(sum);

            }
        }
    });
    renderChart(moneyData);

    // 获取今日订单数
    $.ajax({
        async:false,
        type: "post",
        url: "${pageContext.request.contextPath}/business?m=findOrderCountByDay",
        dataType: "json",
        success: function (data) {
            if (data.code === 200) {
                $('#todayOrder').text(data.data);
            }
        }
    });

    // 获取当前会员数量
    $.ajax({
        async:false,
        type: "post",
        url: "${pageContext.request.contextPath}/member?m=listMember&page=1&limit=10",
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                $('#memberCount').text(data.count);
            }
        }
    });

    // 获取当前正在使用的餐桌数
    $.ajax({
        async:false,
        type: "post",
        url: "${pageContext.request.contextPath}/table?m=findTableCodeByParams&tableIsDeleted=0&page=1&limit=10&tableStatus=1",
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                $('#useTable').text(data.count);
            }
        }
    });

    // 获取菜品数量
    $.ajax({
        async:false,
        type: "post",
        url: "${pageContext.request.contextPath}/food?m=foodList&foodIsDeleted=0&page=1&limit=10",
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                $('#foodCount').text(data.count);
            }
        }
    });

    // 获取员工数量
    $.ajax({
        async:false,
        type: "post",
        url: "${pageContext.request.contextPath}/baseInfo?m=workerManage&workerIsDeleted=0&page=1&limit=10",
        dataType: "json",
        success: function (data) {
            if (data.code === 0) {
                $('#workerNum').text(data.count);
            }
        }
    });

    // 获取今日最热菜品
    $.ajax({
        async:false,
        type: "post",
        url: "${pageContext.request.contextPath}/business?m=findPopularFood",
        dataType: "json",
        success: function (data) {
            if (data.code === 200) {
                $(".foodContainer").empty();
                    $("#foodContent0").append("<div class='layui-col-md2 foodContainer' style='margin-right: 47px;' id='food"+data.data.foodId+"'></div>");
                    $("#food"+data.data.foodId).append('<img  src="/upload/'+data.data.foodImg+'" width="170px" height="150px" alt="">\n' +
                        '                <div class="foodName"><h5>'+data.data.foodName+'</h5></div>\n' +
                        '                <div class="foodPrice">今日销量：'+data.count+'</div>\n')

            }
            if(data.code == 1001){
                $(".foodContainer").empty();
                $("#foodContent0").append("<div class='layui-col-md2 foodContainer' style='margin-right: 47px;' id='food0'></div>");
                $("#food0").append('<img  src="/upload/empty.jpg" width="170px" height="150px" alt="">\n' +
                    '                <div class="foodName"><h5>暂无今日热门</h5></div>\n' )

            }
        }
    });

    // 获取累计销量的食品
    $.ajax({
        async:false,
        type: "post",
        url: "${pageContext.request.contextPath}/business?m=findAllPopularFood",
        dataType: "json",
        success: function (data) {
            if (data.code === 200) {
                //$(".foodContainer").empty();
                $(data.data).each(function () {
                    $("#foodContent1").append("<div class='layui-col-md2 foodContainer' id='aFood"+this.foodId+"'></div>");
                    $("#aFood"+this.foodId).append('<img  src="/upload/'+this.foodImg+'" width="170px" height="150px" alt="">\n' +
                        '                <div class="foodName"><h5>'+this.foodName+'</h5></div>\n' +
                        '                <div class="foodPrice">总销量：'+this.page+'</div>\n')
                });
            }
        }
    });
</script>

</body>

</html>